<template>
	<view v-if="Object.keys(teacherDetail).length > 0">
		<view class="page pd-30">
			<comHead :datas="datasObj"></comHead>
			<view class="card_1">
				<view class="share flex">
					<image class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/shareIcon.png"></image>
					<text class="ft ml-8"> 分享</text>
					<button open-type="share" class="hidden-share-btn" @click="triggerShare"></button>
				</view>
				<!-- {{ teacherDetail.view_list }} -->
				<view class="see flex">
					<!-- <avtor-group :avatars="teacherDetail.view_list.map((item) => { return item.avatar })"></avtor-group> -->
					<avtorGroup v-if="teacherDetail.view_list.length > 0" :avatars="teacherDetail.view_list"
						keyName="avatar" size="38"></avtorGroup>
					<view class="ft ml-8">{{ teacherDetail.view_num }}浏览过</view>
				</view>
				<view class="avt flex-center">
					<image class="img" mode="aspectFill" :src="teacherDetail.avatar"></image>
				</view>
			</view>
			<view class="card_2">
				<view class="ft1 flex-center">{{ teacherDetail.nickname_show }}
				</view>
				<view class="ft1 flex-center mt-20" v-if="teacherDetail.area_show || teacherDetail.sex">
					<view class="tip flex-center mr-20" v-if="teacherDetail.area_show">
						<image class="image mr-8 wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png">
						</image>
						<text class="ft">{{ teacherDetail.area_show }}</text>
					</view>
					<view class="tip flex-center" v-if="teacherDetail.sex && teacherDetail.sex != '不显示'">
						<image v-if="teacherDetail.sex === '男'" class="image wh-24"
							src="https://cdn.oss.bon-top.cn/static_bc/images/boy.png"></image>
						<image v-else-if="teacherDetail.sex === '女'" class="image mr-8 wh-24"
							src="https://cdn.oss.bon-top.cn/static_bc/images/girl.png"></image>
						<text class="ft">{{ teacherDetail.sex }}</text>
					</view>
				</view>
				<view class="ft flex-center c-66 mt-20"
					v-if="teacherDetail.experience_show || teacherDetail.service_time">
					<view class="flex-start" style="padding-right: 10rpx;">
						<template v-if="teacherDetail.experience_show"><text>从业经验：{{ teacherDetail.experience_show
						}}</text><text class="line"
								style="display: inline-block;width: 2rpx;height: 28rpx;background-color: #F1F1F1;margin-left: 20rpx;margin-right: 20rpx;"></text></template>
					</view>
					<text>
						{{ "服务时间：" + teacherDetail.service_time }}</text>
				</view>
				<view class="ft flex-center second mt-20 pd-20">
					<view class="item">
						<text class="ft mr-8">{{ "好评率" }}</text>
						<text class="ft-num ft-34">{{ teacherDetail.good_percent + "%" }}</text>
					</view>
					<text class="line"
						style="display: inline-block;width: 2rpx;height: 28rpx;background-color: #F1F1F1;margin-left: 40rpx;margin-right: 40rpx;"></text>
					<view class="item">
						<text class="ft mr-8">{{ "咨询数" }}</text>
						<text class="ft-num ft-34">{{ teacherDetail.consult_num }}</text>
					</view>
					<text class="line"
						style="display: inline-block;width: 2rpx;height: 28rpx;background-color: #F1F1F1;margin-left: 40rpx;margin-right: 40rpx;"></text>
					<view class="item">
						<text class="ft mr-8">{{ "点赞" }}</text>
						<text class="ft-num ft-34">{{ teacherDetail.like_num }}</text>
					</view>
				</view>
			</view>
			<view class="card_3 mt-20 pd-20" v-if="teacherDetail.tags.length > 0">
				<view class="ft1">Ta的标签</view>
				<view class="white mt-20">
					<template v-for="(item, index) in teacherDetail.tags" :key="item.id">
						<view class="item flex-center ft mt-10 c-33" v-if="index < 8">{{ item.name }}</view>
					</template>
				</view>
				<view class="btn flex-center" @click="goMore(0)">
					<text class="ft mr-8">查看更多</text>
					<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
			</view>
			<view class="card_3 mt-20 pd-20" v-if="teacherDetail.product_num > 0">
				<view class="ft1">擅长项目</view>
				<view class="sanC mt-20 pd-20" v-if="teacherDetail.immigrate_list.length > 0">
					<view class="ft1 ft-24">{{ "移民（" + teacherDetail.immigrate_list.length + "）" }}</view>
					<view class="flex-start mt-10">
						<view class="item flex-center ft mt-10 c-33" v-for="item in teacherDetail.immigrate_list"
							:key="item.id">{{
								item.name }}</view>
					</view>
				</view>
				<view class="sanC mt-20 pd-20" v-if="teacherDetail.education_list.length > 0">
					<view class="ft1 ft-24"> {{ "教育（" + teacherDetail.education_list.length + "）" }}</view>
					<view class="flex-start mt-10">
						<view class="item flex-center ft mt-10 c-33 bg" v-for="item in teacherDetail.education_list"
							:key="item.id">
							{{ item.name }}</view>
					</view>
				</view>
				<view class="btn flex-center" @click="goMore(1)">
					<text class="ft mr-8">查看更多</text>
					<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
			</view>
			<view class="card_3 mt-20 pd-20" v-if="teacherDetail.files.length || teacherDetail.images.length">
				<view class="ft1">视频&图</view>
				<view style="height: 20rpx;"></view>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view class="imgGroup flex">
						<view class="group-img" v-for="(item, index) in teacherDetail.files" :key="index"
							@click="openVideoPopup(item)">
							<image class="play-icon" mode="widthFix"
								src="https://cdn.oss.bon-top.cn/static_bc/images/play-icon.png">
							</image>
							<image class="wh-100" mode="aspectFill"
								:src="item + '?x-oss-process=video/snapshot,t_1000,f_jpg,m_fast'">
							</image>
							<view class="img-count flex-center">{{ teacherDetail.files.length +
								teacherDetail.images.length
							}}
							</view>
						</view>
						<view class="group-img"
							v-for="(item, index) in teacherDetail.images.slice(0, teacherDetail.files.length ? 3 : 4)"
							:key="index" @click="handlePreview(index, teacherDetail.images)">
							<image class="wh-100" mode="aspectFill" :src="item"></image>
							<view class="img-count flex-center">{{ teacherDetail.files.length +
								teacherDetail.images.length
							}}
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="btn flex-center" @click="goMore(2)">
					<text class="ft mr-8">查看更多 ({{ teacherDetail.files.length + teacherDetail.images.length }})</text>
					<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
			</view>
			<view class="card_3 mt-20 pd-20"
				v-if="teacherDetail.constellation || teacherDetail.area_show || teacherDetail.place_show || teacherDetail.brand_info">
				<view class="ft1">基本信息</view>
				<view class="mt-20" v-if="teacherDetail.constellation">
					<text class="label ft c-99">{{ "星座 " }}</text>
					<text class="ft">{{ teacherDetail.constellation }}</text>
				</view>
				<view class="mt-20" v-if="teacherDetail.area_show">
					<text class="label ft c-99"> {{ "所在地 " }}</text>
					<text class="ft">{{ teacherDetail.area_show }}</text>
				</view>
				<view class="mt-20" v-if="teacherDetail.place_show">
					<text class="label ft c-99">{{ "籍贯 " }} </text>
					<text class="ft">{{ teacherDetail.place_show }}</text>
				</view>
				<view class="mt-20 flex" v-if="teacherDetail.brand_info"
					@click="goPage('/subpackage/brandParty/brandPartyDetail?id=' + teacherDetail.brand_id)">
					<text class="label ft c-99">{{ "所在企业" }}</text>
					<view class="flex-bwt" style="flex: 1;">
						<text class="ft">{{ teacherDetail.brand_info.name }}</text>
						<image mode="widthFix" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"
							style="width:20rpx;height: 34rpx;margin-left: 10rpx;"></image>
					</view>
				</view>
			</view>
			<view class="card_3 mt-20 pd-20" v-if="teacherDetail.des.length">
				<view class="ft1">老师介绍</view>
				<view class="desc ft c-66 pd-20" :class="{ active: isShowMoreDesc }">
					<view class="desc-content">{{ teacherDetail.des }}</view>
				</view>
				<view class="btn flex-center" @click="isShowMoreDesc = true" v-if="!isShowMoreDesc">
					<text class="ft mr-8">查看更多</text>
					<image class="wh-24 degdonw" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
					</image>
				</view>
				<view class="btn flex-center" @click="isShowMoreDesc = false" v-else>
					<text class="ft mr-8">收起更多</text>
					<image class="wh-24 deg" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
			</view>
			<view class="thrumb mt-30 flex pd-20" v-if="teacherDetail.like_list.length > 0">
				<!-- <view style="flex: 1;">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="flex">
							<view class="avtor" v-for="(item, index) in teacherDetail.like_list" :key="index">
								<image class="img" :src="item.avatar" mode="aspectFill"></image>
								<image class="img2" src="https://cdn.oss.bon-top.cn/static_bc/images/tumb.png">
								</image>
							</view>
							<view class="avtorNext flex-center ft-num3 ft-32">+{{ teacherDetail.like_list.length }}
							</view>
						</view>
					</scroll-view>
				</view> -->
				<avtorGroup :avatars="teacherDetail.like_list.map(f => f.avatar)" size="68">
				</avtorGroup>
				<view class="ft flex-center c-66" style="min-width: 184rpx;margin-left: auto;"> {{ teacherDetail.like_num + '人点赞了' }}
				</view>
			</view>
			<view class="card_3 mt-20 pd-20" v-if="evaluateInfo.pageInfo && evaluateInfo.pageInfo.total > 0">
				<template v-if="evaluateInfo.pageInfo.total > 0">
					<view class="flex-bwt">
						<view class="ft1">评价<text class="ft c-99">({{ evaluateInfo.pageInfo.total }})</text></view>
						<view class="ft flex">
							<!-- <up-rate :value="evaluateInfo.avg_star" activeColor="#333" size="22rpx" readonly></up-rate> -->
							<!-- {{ evaluateInfo.avg_star }} -->
							<comRate ref="comRate" v-if="evaluateInfo.avg_star" :num="evaluateInfo.avg_star" disabled>
							</comRate>
							<!-- {{ evaluateInfo.good_percent }} -->
							<text>好评率</text>
						</view>
					</view>
					<view class="flex-start">
						<view :class="{ active: selctTab === item.id }" class="tab ft flex-center c-66 mr-20 mt-20"
							v-for="(item, index) in tabList" :key="item.id" @click="selectTabs(item.id)">
							{{ item.des + item.num + "" }}
						</view>
					</view>
					<view class="mark pd-20" v-if="evaluateList.length > 0">
						<view class="flex">
							<image style="border-radius: 50%" class="wh-56 mr-10"
								:src="evaluateList[0].user_info.avatar" mode="aspectFill"></image>
							<text class="ft fw-800">{{ evaluateList[0].user_info.nickname }}</text>
							<view class="nameplate ml-20 ft ft-20 c-dbf"
								v-if="evaluateList[0].user_info?.level_info?.id > 1" style="flex-shrink: 0;">{{
									evaluateList[0].user_info?.level_info?.name
								}}</view>
						</view>
						<view class="ml-20 ft c-99 mt-10">{{ evaluateList[0].name }}</view>
					</view>
					<view class="btn flex-center" @click="goMore(3)">
						<text class="ft mr-8">查看更多</text>
						<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
					</view>
				</template>
			</view>
			<view class="flex mt-30">
				<view class="popuItem pd-20 ft flex-center mr-20" v-for="(item, index) in checkList" :key="item.id"
					:class="{ active: tabSec === item.id }" @click.stop="selctCheck(item.id)">
					{{ item.title }}
				</view>
			</view>
			<view style="margin-bottom: 166rpx; position: relative;" v-if="tabSec === 1" class="mt-20 pd-20"
				:class="{ card_3: dailyList.length > 0 }">
				<view class="flex list-item" v-for="(item, index) in dailyList" :key="item.id">
					<view class="ft1" style="width: 104rpx">
						<view>{{ item.share_date }}</view>
						<view class="mt-10">{{ item.share_time }}</view>
					</view>
					<view style="flex: 1;">
						<view class="mt-20 pd-20 text">

							<view class="ft c-66 mt-12" style="word-break: break-all;" v-if="item.content">
								{{ item.is_show_all == 1 ? item.content : (item.content.substring(0, 60)) }}
								<text class="ft c-bbq" v-if="item.content.length >= 60"
									@click="item.is_show_all = item.is_show_all == 1 ? 0 : 1">{{
										item.is_show_all == 1 ? '收起' : '...展开' }}</text>
							</view>
						</view>
						<!-- 单独一张照片 -->
						<view class="imgGroup" style="width: 100%;"
							v-if="item.type == 2 && item.images && item.images.length == 1">
							<image class="wh-100 bd-r40" mode="widthFix" :src="item.images[0]"
								@click="handlePreview(0, item.images)"></image>
						</view>

						<!-- 多张照片 -->
						<view class="imgGroup imgGroup-1 flex" style="overflow: hidden;position: relative;"
							v-else-if="item.type == 2 && item.images && item.images.length > 0">
							<view class="group-img group-img-1" v-for="(v, i) in item.images" :key="i"
								@click="handlePreview(i, item.images)">
								<image class="wh-100" mode="aspectFill" :src="v"></image>
								<!-- <view class="img-count flex-center">{{ item.images.length }}</view> -->
							</view>
						</view>

						<view :style="'width:100%;'" v-if="item.type == 1 && item.video">
							<video :src="item.video" object-fit="contain"
								:style="'width:100%;height:' + item.video_height + 'rpx;'" controls>
							</video>
						</view>
						<view class="mt-20 pd-20 text">
							<view @click="goProjectDetail(item.product_info.id)" v-if="item.product_info">
								<text class="ft1 ft-24 mr-8" style="word-break: break-all;">
									{{ "[ 项目推荐 ] " +
										item.product_info.name.substring(0, 20) + (item.product_info.name.length > 20 ?
											'...' : '') }}
								</text>
								<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
								</image>
							</view>

						</view>


						<view class="positionBox" v-if="id == sale_id">
							<!-- <image @click="isMore = !isMore" style="
									z-index: 1;
									width: 74rpx;
									height: 42rpx;
									margin: 10rpx 0;" src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png" /> -->
							<view class="moreView flex-eve" @click="item.isMore = !item.isMore">
								<view class="moreView_item" v-for="a in 3" :key="a"></view>
							</view>
							<view v-if="item.isMore" class="box pd-20">
								<view class="ft c-33  flex-center" @click="isDelete(item.id)">
									删除</view>
							</view>
						</view>


					</view>
				</view>
				<view class="com-empty" v-if="dailyList.length == 0">暂无数据</view>
			</view>

			<view style="margin-bottom: 166rpx;" v-if="tabSec === 2" class="mt-20">

				<ComProjectList class="pd-20" v-if="productList.length > 0" :dataList="productList"
					:dataObj="dataListObj" @getProjectList="getProductData">
				</ComProjectList>

				<view class="com-empty" v-if="productList.length == 0">暂无数据</view>
			</view>
			<view style="margin-bottom: 166rpx;" v-if="tabSec === 3">
				<view class="vedio flex-bwt" style="flex-wrap: wrap;">
					<view class="vedioItem" v-for="item in videoList" :key="item.id"
						@click="goPage(`/pages/category/category?id=${item.id}&isReback=${true}`)">
						<image style="border-radius: 40rpx" class="bg wh-100" mode="aspectFill" :src="item.cover">
						</image>
						<image class="play wh-56" src="https://cdn.oss.bon-top.cn/static_bc/images/play.png"></image>
						<view class="card flex pd-12">
							<view class="avtor">
								<image class="wh-56" style="border-radius: 50%" :src="item.sale_info.avatar"></image>
								<image class="huiyuan" v-if="item.sale_info.is_official"
									src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png">
								</image>
							</view>
							<view class="desc ml-12" v-if="item.product_info">
								<view style="width: 200rpx" class="ft1 ft-lue">{{
									item.product_info.name
								}}</view>
								<view class="flex ft-lue" style="width: 200rpx">
									<text class="ft3" v-for="tag in item.product_info.tags" :key="tag.id">{{ "#" +
										tag.name
									}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="com-empty" v-if="videoList.length == 0">暂无数据</view>
			</view>
		</view>
		<view class="buyCard">
			<view class="btncard flex-bwt pd-10">
				<view class="ml-20 flex-center" style="align-items: flex-start;">
					<view class="mr-20 mt-10" style="display: flex;flex-direction: column; align-items: center;"
						v-if="teacherDetail.is_like == 1" @click.stop="handleZan(teacherDetail.is_like, teacherDetail)">
						<image class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
						<view class="ft">点赞{{ teacherDetail.like_num }}</view>
					</view>
					<view class="mr-20 mt-10" style="display: flex;flex-direction: column; align-items: center;"
						v-if="teacherDetail.is_like == 0" @click.stop="handleZan(teacherDetail.is_like, teacherDetail)">
						<image class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/unzan.png"></image>
						<view class="ft">点赞{{ teacherDetail.like_num }}</view>
					</view>
					<view v-if="teacherDetail.is_free == 0">
						<view class="">
							<text class="ft c-33 ft-22">1次/</text>
							<text class="ft ft-22 c-red ">￥</text>
							<text class="ft-num  c-red ">{{ teacherDetail.price }}</text>
							<text class="ft ft-22 c-red">元</text>
						</view>
						<view class="flex"><text class="ft c-99 mr-8">预约流程</text>
							<image class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/ques.png"></image>
						</view>
					</view>
					<view class="ml-20 appointment-num" v-if="teacherDetail.pass_appointment_num > 0">
						约过{{ teacherDetail.pass_appointment_num }}次</view>
				</view>
				<view class="c-dbf ft btn flex-center mr-20" v-if="!teacherDetail.is_official" @click="showOrder">预约咨询
				</view>
				<view class="c-dbf ft btn flex-center mr-20" v-if="teacherDetail.is_official">咨询客服</view>
			</view>
		</view>
	</view>
	<up-popup :show="showV" mode="center" @open="openV">
		<view class="video-wrapper">
			<view class="close_img" :style="{ top: navHeight + 'px' }">
				<image class="popup-close" @click="closeV"
					src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png">
				</image>
			</view>
			<!-- 			<video :src="currentVideoUrl" :controls="true" :enable-play-gesture="true" @play="isPlaying = true"
				@pause="isPlaying = false" @ended="onPopupClose"></video> -->
			<!-- <view class="video_box"> -->

			<video :src="currentVideoUrl" object-fit="contain" :style="'width:100%;height:70vh;'" controls></video>
			<!-- </view> -->
		</view>
	</up-popup>

	<view class="mask" v-if="showO"></view>
	<view class="offers" v-if="showO">
		<image class="popup-close wh-36" @click="closeO"
			src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png">
		</image>
		<view class="ft-32 ft1">预约咨询</view>
		<!-- wh-32 -->
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="progress">
				<view class="flex-bwt" style="align-items: flex-start;">
					<view class="flex-c-center">
						<view class="wh-32 ft-22 fw-800 flex-center bd-r50c num act">1</view>
						<view class="ft mt-10 fw-800">支付费用</view>
					</view>
					<image class="icon" mode="widthFix"
						src="https://cdn.oss.bon-top.cn/static_bc/images/progress_arrow_a.png"></image>
					<view class="flex-c-center">
						<view class="wh-32 ft-22 fw-800 flex-center bd-r50c num">2</view>
						<view class="ft mt-10">客服确认时间</view>
					</view>
					<image class="icon" mode="widthFix"
						src="https://cdn.oss.bon-top.cn/static_bc/images/progress_arrow_b.png"></image>
					<view class="flex-c-center">
						<view class="wh-32 ft-22 fw-800 flex-center bd-r50c num">3</view>
						<view class="ft mt-10">参会沟通</view>
					</view>
					<image class="icon" mode="widthFix"
						src="https://cdn.oss.bon-top.cn/static_bc/images/progress_arrow_b.png"></image>
					<view class="flex-c-center">
						<view class="wh-32 ft-22 fw-800 flex-center bd-r50c num">4</view>
						<view class="ft mt-10">获取评估完成</view>
					</view>
				</view>
			</view>
			<view class="inp-item flex-bwt pd-20 mt-20">
				<view class="ft fw-800">预约日期</view>
				<picker mode="date" @change="changeDate">
					<view class="r flex-end">
						<view class="txt" :class="{ act: info.appointment_date }">{{ info.appointment_date ?
							info.appointment_date
							:
							'请选择'
						}}
						</view>
						<image class="icon ml-10" mode="widthFix"
							src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
					</view>
				</picker>
			</view>
			<view class="inp-item flex-bwt pd-20 mt-20">
				<view class="ft fw-800">预约时间</view>
				<picker mode="time" @change="changeTime">
					<view class="r flex-end">
						<view class="txt" :class="{ act: info.appointment_time }">{{ info.appointment_time ?
							info.appointment_time :
							'请选择'
						}}
						</view>
						<image class="icon ml-10" mode="widthFix"
							src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
					</view>
				</picker>
			</view>
			<view class="inp-item flex-bwt pd-20 mt-20">
				<view class="ft fw-800">咨询方式</view>
				<picker mode="selector" :range="orderOptions.consult_list" @change="changeConsultType">
					<view class="r flex-end">
						<view class="txt" :class="{ act: info.consult_type }">{{ info.consult_type ? info.consult_type :
							'请选择' }}
						</view>
						<image class="icon ml-10" mode="widthFix"
							src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
					</view>
				</picker>
			</view>
			<view class="inp-item flex-bwt pd-20 mt-20">
				<view class="ft fw-800">项目需求</view>
				<picker mode="selector" :range="orderOptions.intention_list" @change="changeIntention">
					<view class="r flex-end">
						<view class="txt" :class="{ act: info.intention }">{{ info.intention ? info.intention : '请选择' }}
						</view>
						<image class="icon ml-10" mode="widthFix"
							src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
					</view>
				</picker>
			</view>
			<view class="inp-item flex-bwt pd-20 mt-20">
				<view class="ft fw-800">联系方式</view>
				<view class="r flex-end">
					<input class="inp" placeholder="请输入手机号" placeholderStyle="font-size: 24rpx;color: #D1D1D1;"
						border="none" v-model="info.tel" @blur="blur"></input>
				</view>

			</view>
			<view class="ft-22 ml-10 mt-4" style="color:#FF0000;text-align: right;" v-show="!phonemsg">请输入正确手机号</view>
			<view class="inp-item flex-bwt pd-20 mt-20">
				<view class="ft fw-800">联系人</view>
				<view class="r flex-end">
					<input class="inp" placeholder="请输入名称" placeholderStyle="font-size: 24rpx;color: #D1D1D1;"
						border="none" v-model="info.linkname"></input>
				</view>
			</view>
			<view class="price-box pd-20">
				<view class="flex-bwt">
					<view class="ft-24 c-99">商品价格</view>
					<view class="ft fw-800">￥{{ priceInfo.total_old_price_exchange_show }}</view>
				</view>
				<view class="flex-bwt mt-20" @click="showQuan = true">
					<view class="ft-24 c-99">优惠减</view>
					<view class="flex">
						<view class="txt">-￥{{ priceInfo.total_coupon_price_exchange_show }}</view>
						<image class="icon ml-10" mode="widthFix"
							src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
					</view>
				</view>
			</view>
			<view class="note mt-20 pd-20">
				<view class="ft1">{{ "备注" }}</view>
				<view class="mt-20 center ft pd-20" :class="{ 'flex-center': !remark }" @click="goNote">
					<view class="ft" v-if="remark">{{ remark }}</view>
					<view class="btn flex-center ft c-33" v-if="!remark">
						<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/note.png"></image>
						<text class="mr-8">请填写您的备注</text>
					</view>
				</view>
			</view>
			<view style="height: 140rpx;"></view>
		</scroll-view>
		<view class="bottomBtn flex-center">
			<view class="flex-bwt" style="width: 690rpx;">
				<view><text class="ft c-33 ft-22">1次/</text>
					<text class="ft ft-22 c-red ">￥</text>
					<text class="ft-num  c-red ">{{ priceInfo.pay_price_show }}</text>
					<text class="ft ft-22 c-red">元</text>
				</view>
				<view class="btn flex-center ft c-dbf" @click="subOrder">去支付</view>
			</view>
		</view>
	</view>
	<up-popup :show="showQuan" mode="bottom" round="14" @open="openQ">
		<view class="offers quan">
			<image class="popup-close wh-36" @click="closeQ"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">优惠券</view>
			<view class="ft c-red mt-12">当前订单的优惠券</view>
			<view class="hengxian mt-20"></view>
			<view class="mt-20 ft fw-800">{{ "可领取优惠券" }}</view>
			<view class="list" v-if="priceInfo.coupon_list && priceInfo.coupon_list.length > 0">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="quanItem flex mt-12" v-for="(item, index) in priceInfo.coupon_list" :key="item.id"
						@click="checkCoupon(item, index)">
						<view class="arrow">
							<view class="tip ft ft-20 flex-center c-ff">{{ item.preferential_name }}</view>
							<view class="mt-20 flex-center">
								<view>
									<view class="ft-num ft-32">{{ item.currency_symbol }}{{ item.reduce }}</view>
									<view class="ft text_center">{{ item.type_name }}</view>
								</view>
							</view>
						</view>
						<view class="right flex-bwt pd-20">
							<view class="ml-20 mt-10">
								<view class="ft fw-800" v-if="item.is_stackable === 1">部分商品可用（可叠加）</view>
								<view class="ft fw-800" v-else>部分商品可用（不可叠加）</view>
								<view class="ft c-99 mt-10">{{ item.start_time }}~{{ item.end_time }}</view>
							</view>
							<image class="mr-10" style="width: 30rpx;height: 30rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" v-if="item.is_check == 1">
							</image>
							<image class="mr-10" style="width: 30rpx;height: 30rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png"
								v-if="item.is_check == 0">
							</image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn flex-center ft c-dbf" @click="sureCoupon">确定</view>
			</view>
		</view>
	</up-popup>
	<dialogPop ref="diaLogPop" :show="show" title="删除" content='确定要删除该日常吗?' @confirm='confirm' @cancel='cancel'>
	</dialogPop>
</template>
<script setup lang="js">
import {
	ref,
	onMounted,
	onUnmounted,
	reactive,
	nextTick
} from 'vue';
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";

import avtorGroup from '@/components/avtorGroup.vue';
import dialogPop from '@/components/dialogPop.vue';
import {
	onLoad,
	onUnload,
	onReachBottom,
	onShareAppMessage,
	onShareTimeline,
	onReady
} from '@dcloudio/uni-app';
import ComProjectList from "@/components/comProjectList.vue";
import comRate from '@/components/comRate.vue'
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '老师详情',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
})
let pageInfo = reactive({
	page: 1,
	pageSize: 10
})
const isShowMoreDesc = ref(false)
const checkList = ref(
	[{
		id: 1,
		title: '日常分享'
	},
	{
		id: 2,
		title: '推荐项目'
	},
	{
		id: 3,
		title: '视频'
	}
	]
)
const isMore = ref(false);
const deleteId = ref(null)
const show = ref(false)
// /删除
const isDelete = (id) => {
	show.value = true;
	deleteId.value = id
}

//删除日常
const confirm = () => {
	show.value = false;
	utils
		.request(
			api.deleteSaleDaily, {
			id: deleteId.value
		},
			"post"
		)
		.then((res) => {
			dailyList.value = []
			dailyPage.value = 1
			dailyLoading.value = true
			getDailyData()
		});
}

const cancel = () => {
	show.value = false;
	dailyList.value.forEach(f => f.isMore = false)
};
//获取老师详情接口
const teacherDetail = ref({})
const getSaleDetailData = (id) => {
	utils
		.request(
			api.getSaleDetail, {
			id: id
		},
			"get"
		)
		.then((res) => {
			teacherDetail.value = res.data?.info;
			// uni.showModal({
			// 	title: '提示',
			// 	content: 'obj' + Object.keys(res.data?.info).length,
			// 	showCancel: true,
			// 	success: ({ confirm, cancel }) => { }
			// })
		});
};
const id = ref(null)
const share_user_id = ref('')
const timestemp = ref('')
const sale_id = ref(null)

let defaults = reactive(['A9rrkF9jh1aN08OsQK9u5KDbB0dh5tusqxtsf3l0K74'],)//报告生成通知

const isSettings = ref(false)
onLoad((options) => {
	let userInfo = uni.getStorageSync('userInfo')
	sale_id.value = userInfo?.sale_id ?? ''
	startTime.value = Math.floor(Date.now() / 1000)
	id.value = !options.id ? userInfo.sale_id : options.id;
	timestemp.value = options.timestemp ? options.timestemp : ''
	share_user_id.value = options.share_user_id ? options.share_user_id : userInfo.share_user_id

	getSaleDetailData(id.value);
	getSaleEvaluateData(id.value)

	selctCheck(tabSec.value)

	initShareParams()
	wx.getSetting({
		withSubscriptions: true,

		success(res) {
			if (res.subscriptionsSetting.itemSettings) {
				// isSettings.value = defaults.some(f => res.subscriptionsSetting.itemSettings[f])
				if (res.subscriptionsSetting.itemSettings['A9rrkF9jh1aN08OsQK9u5KDbB0dh5tusqxtsf3l0K74']) isSettings.value = true
			}
		}
	})
})

const goMore = (num) => {
	if (num === 0) {
		uni.navigateTo({
			url: '/subpackage/teacher/tags',
			success: (res) => {
				// 向子页面传递数据
				res.eventChannel.emit('toDetail', {
					tags: teacherDetail.value.tags
				});
			}
		})
	} else if (num === 1) {
		uni.navigateTo({
			url: '/subpackage/teacher/skilled',
			success: (res) => {
				// 向子页面传递数据
				res.eventChannel.emit('toDetail', {
					immigrate_list: teacherDetail.value.immigrate_list,
					education_list: teacherDetail.value.education_list
				});
			}
		})
	} else if (num === 2) {
		uni.navigateTo({
			url: '/subpackage/teacher/files',
			success: (res) => {
				// 向子页面传递数据
				res.eventChannel.emit('toDetail', {
					files: teacherDetail.value.files,
					images: teacherDetail.value.images
				});
			}
		})
	} else if (num === 3) {
		uni.navigateTo({
			url: '/subpackage/teacher/appraise?sale_id=' + id.value
		})
	}
}

//评价信息
const tabList = ref([])
const evaluateInfo = ref({})
const evaluatePage = ref(1)
const evaluateList = ref([])
const evaluateLoading = ref(true)
const getSaleEvaluateData = (id) => {
	if (!evaluateLoading.value) {
		return
	}
	evaluateLoading.value = false

	utils
		.request(
			api.getEvaluateList, {
			sale_id: id,
			tag_id: selctTab.value,
			page: evaluatePage.value,
			pageSize: 5,
		},
			"get"
		)
		.then((res) => {
			if (tabList.value.length == 0) {
				evaluateInfo.value = res.data
				tabList.value.push({
					id: '',
					des: '全部',
					num: res.data.pageInfo.total
				})
				res.data.tag_list.map((item) => {
					tabList.value.push({
						id: item.id,
						des: item.name,
						num: item.num
					})
				})
			}
			evaluatePage.value++
			if (res.data.items.length > 0) {
				evaluateList.value = evaluateList.value.concat(res.data.items)
				evaluateLoading.value = true
			}
		});
}

const selctTab = ref('');
const selectTabs = (idx) => {
	// selctTab.value = idx
	// evaluatePage.value = 1
	// evaluateList.value = []
	// evaluateLoading.value = true
	// getSaleEvaluateData(id.value)
}

const tabSec = ref(1)
const selctCheck = (id) => {
	tabSec.value = id
	dailyPage.value = 1
	dailyLoading.value = true
	if (id == 1) {
		getDailyData()
	} else if (id == 2) {
		getProductData()
	} else if (id == 3) {
		getVideoData()
	}
}


//日常分享信息
const dailyPage = ref(1)
const dailyList = ref([])
const dailyLoading = ref(true)
const getDailyData = () => {
	if (!dailyLoading.value) return

	uni.showLoading()
	dailyLoading.value = false
	utils
		.request(
			api.getSaleShareList, {
			page: dailyPage.value,
			pageSize: 5,
			sale_id: id.value
			// type: tabSec.value
		},
			"get"
		)
		.then((res) => {
			dailyPage.value++
			if (res.data.items.length > 0) {
				dailyList.value = dailyList.value.concat(res.data.items)
				dailyList.value.forEach(f => f.isMore = false)
			}
			if (dailyPage.value <= res.data.pageInfo.totalPage) {
				dailyLoading.value = true
			}
			uni.hideLoading()
		});
};

//推荐项目
const productPage = ref(1)
const productList = ref([])
let dataListObj = reactive({})
const productLoading = ref(true)
const getProductData = () => {
	if (!productLoading.value) {
		return
	}
	uni.showLoading()
	productLoading.value = false
	utils
		.request(
			api.getProductList, {
			page: productPage.value,
			pageSize: 5,
			sale_id: id.value
		},
			"post"
		)
		.then((res) => {
			dataListObj = res.data
			productPage.value++
			if (res.data.items.length > 0) {
				productList.value = productList.value.concat(res.data.items)
			}
			if (productPage.value <= res.data.pageInfo.totalPage) {
				productLoading.value = true
			}
			uni.hideLoading()
		});
};

const goProjectDetail = (id) => {
	uni.navigateTo({
		url: `/subpackage/immigration/immigration?id=${id}`,
	});
}

//老师视频
const videoPage = ref(1)
const videoList = ref([])
const videoLoading = ref(true)
const getVideoData = () => {
	if (!videoLoading.value) {
		return
	}
	uni.showLoading()
	videoLoading.value = false
	utils
		.request(
			api.getVideoList, {
			page: videoPage.value,
			pageSize: 10,
			sale_id: id.value
		},
			"post"
		)
		.then((res) => {
			videoPage.value++
			if (res.data.items.length > 0) {
				videoList.value = videoList.value.concat(res.data.items)
			}
			if (videoPage.value <= res.data.pageInfo.totalPage) {
				videoLoading.value = true
			}
			uni.hideLoading()
		});
};

onReachBottom(() => {
	console.log('出发底部')
	if (tabSec.value === 1 && dailyLoading.value) {
		getDailyData()
	}
	// else if (tabSec.value === 2 && productLoading.value) {
	// 	getProductData()
	// } 
	else if (tabSec.value === 3 && videoLoading.value) {
		getVideoData()
	}
})

// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url
	})
}
const flag = ref(true)
const zanCount = ref(0)
const zanTime = ref('')
const maxTime = ref(30)
const handleZan = (isLike, item) => {
	let time = (parseInt(Date.now()) - parseInt(zanTime.value)) / 1000
	if (time < maxTime.value && zanCount.value > 10) {
		uni.showToast({ title: '操作过于频繁请稍后再试~', icon: 'none' })
		return flag.value = false
	} else if (time > maxTime.value) {
		zanTime.value = ''
		flag.value = true
		zanCount.value = 0
	}
	if (!flag.value) return
	flag.value = !flag.value
	zanCount.value++
	if (!zanTime.value) zanTime.value = Date.now()

	if (isLike == 1) {
		utils
			.request(
				api.cancelLike, {
				sale_id: teacherDetail.value.id,
			},
				"post"
			)
			.then((res) => {
				teacherDetail.value.is_like = 0
				teacherDetail.value.like_num--
				flag.value = !flag.value

			});
	} else {
		utils
			.request(
				api.like, {
				sale_id: teacherDetail.value.id,
			},
				"post"
			)
			.then((res) => {
				flag.value = !flag.value
				teacherDetail.value.is_like = 1
				teacherDetail.value.like_num++
			});
	}
}

const handlePreview = (index, imgList = []) => {
	uni.previewImage({
		current: index,
		urls: imgList
	});
}

const currentVideoUrl = ref('')
const isPlaying = ref(false)
const showV = ref(false)
const closeV = () => {
	showV.value = false
}
const openV = () => {
	showV.value = true;
}

const openVideoPopup = (url) => {
	currentVideoUrl.value = url;
	showV.value = true;
}
const onPopupClose = () => {
	showV.value = false;
	currentVideoUrl.value = '';
}


const showO = ref(false)
const closeO = () => {
	showO.value = false
	info = {
		appointment_date: "",
		appointment_time: "",
		consult_type: "",
		intention: "",
		tel: "",
		linkname: "",
		remark: "",
	}
	phonemsg.value = true

}
const orderOptions = ref({})
const showOrder = () => {
	getTotal()
	utils
		.request(
			api.getSaleOptions, {},
			"get"
		)
		.then((res) => {
			orderOptions.value = res.data
			showO.value = true;
		});
}

const showQuan = ref(false)
const closeQ = () => {
	showQuan.value = false
}
const openQ = () => {
	showQuan.value = true;
}

//价格汇算
const priceInfo = ref({})
const getTotal = () => {
	utils
		.request(
			api.saleAppointmentSettlement, {
			sale_id: id.value,
			coupon_id: coupon_id.value
		},
			"post"
		)
		.then((res) => {
			priceInfo.value = res.data
		});
}

let info = reactive({
	appointment_date: "",
	appointment_time: "",
	consult_type: "",
	intention: "",
	tel: "",
	linkname: "",
	remark: "",
})
const appointment_date = ref('')
const appointment_time = ref('')

const changeDate = (e) => {
	// appointment_date.value = e.detail.value
	info.appointment_date = e.detail.value

}
const changeTime = (e) => {
	// appointment_time.value = e.detail.value
	info.appointment_time = e.detail.value
}
const changeConsultType = (e) => {
	// consult_type.value = orderOptions.value.consult_list[e.detail.value]
	info.consult_type = orderOptions.value.consult_list[e.detail.value]
}
const changeIntention = (e) => {
	// intention.value = orderOptions.value.intention_list[e.detail.value]
	info.intention = orderOptions.value.intention_list[e.detail.value]
}

const consult_type = ref('')
const intention = ref('')
const tel = ref('')
const linkname = ref('')
const remark = ref('')

const coupon_id = ref('')

const goNote = () => {
	uni.navigateTo({
		url: "/subpackage/joinGroup/note",
		events: {
			// 监听子页面事件
			fromDetail: (data) => {
				// remark.value = data.remark
				info.remark = data.remark
			}
		},
		success: (res) => {
			// 向子页面传递数据
			res.eventChannel.emit('toDetail', { remark: info.remark });
		}
	});
}
const phonemsg = ref(true)
const blur = () => {
	phonemsg.value = /^1[3-9]\d{9}$/.test(info.tel)

}
function validateFields() {
	let fields = {
		appointment_date: '预约日期',
		appointment_time: '预约时间',
		consult_type: '咨询方式',
		intention: '项目需求',
		tel: '联系方式',
		linkname: '联系人',
	}
	let flag = true
	for (let key in fields) {
		console.log('key', key)
		const value = info[key] // 动态获取ref值
		if (typeof value === 'string' && value.trim() === '') {
			uni.showToast({ title: '请输入' + fields[key], icon: 'none' })
			return flag = false
		}
	}
	return flag
}
const subOrder = () => {
	// 空校验
	let flag = validateFields()
	console.log('flag', flag)
	if (!flag || !phonemsg.value) return
	// if (!appointment_time.value) return uni.showToast({ title: '请选择预约时间~', icon: 'none' })
	// 订阅消息
	if (!isSettings.value) {
		wx.requestSubscribeMessage({
			tmplIds: defaults,
			success(res) {
				utils.subscribeMessage(res)
			},
			complete(res) {
				submit()
			}
		})
	} else {
		submit()

	}
}
const submit = () => {
	const formData = {
		sale_id: id.value,
		coupon_id: coupon_id.value,
		is_sub: 1,
		appointment_time: info.appointment_date + (info.appointment_date && info.appointment_time ? ' ' +
			info.appointment_time + ':00' : (info.appointment_date ? ' 00:00:00' : '')),
		consult_type: info.consult_type,
		intention: info.intention,
		tel: info.tel,
		linkname: info.linkname,
		remark: info.remark,
	}
	utils
		.request(
			api.saleAppointmentSettlement, formData,
			"post"
		)
		.then((res) => {
			if (res.data.is_pay == 1) {
				//跳转到已支付页面
				uni.redirectTo({
					url: `/subpackage/joinGroup/waitPay?id=${res.data.order_id}`,
				});
			} else {
				//跳转到支付页面
				uni.redirectTo({
					url: `/subpackage/joinGroup/cashRegister?order_id=${res.data.order_id}`,
				});
			}
			showO.value = false;
		});

}

const check_coupon_id = ref('')
const checkCoupon = (item, index) => {
	if (item.is_check == 1) {
		check_coupon_id.value = -1
		priceInfo.value.coupon_list[index].is_check = 0
	} else {
		check_coupon_id.value = item.id
		priceInfo.value.coupon_list[index].is_check = 1
		priceInfo.value.coupon_list.value.forEach((v, k) => {
			if (v.id != item.id) {
				priceInfo.value.coupon_list[k].is_check = 0
			}
		})
	}
}
const sureCoupon = () => {
	coupon_id.value = check_coupon_id.value
	getTotal()
	closeQ()
}


// 响应式分享配置
const shareConfig = ref({
	title: '',
	path: '',
	imageUrl: '',
	queryParams: {} // 当前页面参数
})

// 获取页面栈实例
const currentPages = getCurrentPages()
const currentRoute = currentPages[currentPages.length - 1]

// 初始化分享参数
const initShareParams = () => {
	// 获取当前页面参数
	const query = currentRoute.options || {}
	if (!query.share_user_id) {
		const userInfo = uni.getStorageSync("userInfo")
		query.share_user_id = userInfo ? userInfo.id : ''
		query.timestemp = Math.floor(Date.now() / 1000);
	}

	const queryString = Object.keys(query)
		.map(key => `${key}=${query[key]}`)
		.join('&')

	// 更新分享配置
	shareConfig.value = {
		...shareConfig.value,
		path: `${currentRoute.route}?${queryString}`,
		queryParams: query
	}
}

// 触发分享操作
const triggerShare = () => {
	initShareParams()
}

// 好友分享配置
onShareAppMessage(() => ({
	title: shareConfig.value.title,
	path: shareConfig.value.path,
	imageUrl: shareConfig.value.imageUrl,
	success(res) {
		uni.$emit('shareSuccess', {
			type: 'friend',
			data: shareConfig.value.queryParams
		})
	}
}))

// 朋友圈分享配置（需基础库2.11.3+）
onShareTimeline(() => ({
	title: shareConfig.value.title,
	query: shareConfig.value.path.split('?') || '',
	imageUrl: shareConfig.value.imageUrl
}))

const startTime = ref(0)
const duration = ref(0)
onUnload(() => {
	duration.value = Math.floor(Date.now() / 1000) - startTime.value
	if (share_user_id.value && timestemp.value && uni.getStorageSync("userInfo")) {
		utils
			.request(
				api.shareVisit, {
				share_user_id: share_user_id.value,
				timestemp: timestemp.value,
				seconds: Math.round(duration.value / 1000),
				sale_id: id.value,
			},
				"post"
			)
			.then((res) => {

			});
	}
})
const navHeight = ref(0)
onReady(() => {
	setTimeout(() => {
		nextTick(() => {
			const systemInfo = uni.getSystemInfoSync()
			let statusBarHeight = systemInfo.statusBarHeight
			let menuButtonInfo = 0
			// #ifdef MP
			menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// #endif
			let heg = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
			navHeight.value = Number(heg + statusBarHeight)
		})
	}, 500)
})
</script>

<style lang="scss" scoped>
.buyCard {
	width: 100%;
	// height: 166rpx;
	//   border: #dbf046 solid 2rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #f8f8f8;
	padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
	z-index: 99;

	.btncard {
		width: 750rpx;
		height: 98rpx;
		background: #f8f8f8;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.appointment-num {
			background: #FFFFFF;
			border-radius: 40rpx;
			padding: 4rpx 10rpx;
			box-sizing: border-box;
			font-size: 22rpx;
			color: #666666;
			margin-top: 6rpx;
		}

		.btn {
			width: 192rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx;
		}
	}
}

.card_1 {
	width: 100%;
	height: 280rpx;
	border-radius: 40rpx;
	background: #dbf046;
	background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/diwen.png");
	background-size: 100% 100%;
	position: relative;

	.share {
		box-sizing: border-box;
		padding-left: 8rpx;
		position: absolute;
		right: 0;
		top: 94rpx;
		width: 116rpx;
		height: 52rpx;
		background: linear-gradient(93deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(62, 71, 0, 0.1);
		border-radius: 40rpx;

		.hidden-share-btn {
			opacity: 0;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}
	}

	.see {
		box-sizing: border-box;
		padding-left: 8rpx;
		position: absolute;
		right: 0;
		bottom: 20rpx;
		width: 244rpx;
		height: 58rpx;
		background: linear-gradient(95deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}

	.avt {
		position: absolute;
		bottom: -55rpx;
		left: 285rpx;
		width: 128rpx;
		height: 128rpx;
		background: #ffffff;
		border: 2rpx solid #dbf046;
		border-radius: 50%;

		.img {
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
		}
	}
}

.card_2 {
	margin-top: 74rpx;

	// height: 500rpx;
	//   background: #f8f8f8;
	//   border: 2rpx solid red;
	.tip {
		padding-left: 12rpx;
		padding-right: 12rpx;
		// width: 168rpx;
		height: 58rpx;
		background: #f8f8f8;
		border-radius: 20rpx;
	}

	.second {
		width: 690rpx;
		background: linear-gradient(180deg, #fbffdf 0%, #f8f8f8 100%);
		border-radius: 20rpx;
	}
}

.card_3 {
	width: 100%;
	//height: 340rpx;
	background: #f8f8f8;
	border-radius: 40rpx;

	.label {
		display: inline-block;
		width: 130rpx;
	}

	.list-item {
		padding-top: 20rpx;
		align-items: flex-start;
		border-bottom: 2rpx solid #f1f1f1;
		padding-bottom: 20rpx;

		.positionBox {
			position: relative;
			text-align: right;
			display: flex;
			justify-content: flex-end;

			.moreView {
				width: 54rpx;
				height: 36rpx;
				padding: 0 10rpx;
				border-radius: 16rpx;
				background: #e9e9e9;
				box-sizing: border-box;
				margin-top: 16rpx;


				&_item {
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background: #333;
					flex-shrink: 0;
				}
			}

			.box {
				position: absolute;
				top: 55rpx;
				right: -30rpx;
				z-index: 22;
				width: 128rpx;
				// height: 128rpx;
				background: #fff;
				box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.06);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}
	}

	.list-item:first-child {
		padding-top: 0;
	}

	.list-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.text {
		// width: 506rpx;
		//height: 246rpx;
		// background: #ffffff;
		border-radius: 40rpx;
	}

	.mark {
		width: 650rpx;
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 100%);
		border-radius: 0rpx 0rpx 20rpx 20rpx;

		.nameplate {
			// width: 88rpx;
			height: 36rpx;
			background: #333333;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			line-height: 36rpx;
			padding: 0 10rpx;
		}
	}

	.tab {
		width: 172rpx;
		height: 58rpx;
		background: #f1f1f1;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}

	.desc {
		width: 650rpx;
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 100%);
		border-radius: 0rpx 0rpx 20rpx 20rpx;

		.desc-content {
			width: 610rpx;
			max-height: 320rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 8;
			/* 控制显示行数 */
			line-clamp: 8;
			/* 备用属性 */
			line-height: 40rpx;
		}

	}

	.btn {
		.degdonw {

			transform: rotate(90deg);
		}

		.degup {
			transform: rotate(-90deg);
		}
	}


	.desc.active {
		.desc-content {
			max-height: unset;
			display: block;
		}
	}

	.group-img {
		width: 148rpx;
		height: 186rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		flex-shrink: 0;
		// margin-right: 20rpx;

		.play-icon {
			position: absolute;
			top: 12rpx;
			left: 12rpx;
			width: 36rpx;
			height: 36rpx;
			z-index: 1;
		}

		.img-count {
			display: none;
		}
	}

	.group-img-1 {
		width: 176rpx;
		height: 218rpx;
	}

	.imgGroup {
		gap: 20rpx;
		box-sizing: border-box;

		.group-img:nth-child(4) {
			.img-count {
				display: flex;
				width: 54rpx;
				height: 52rpx;
				// background: #F8F8F8;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 26rpx;
				font-weight: 800;
				font-size: 22rpx;
				color: #333333;
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				z-index: 2;
				backdrop-filter: blur(30rpx);
				-webkit-backdrop-filter: blur(30rpx);
			}
		}
	}

	.imgGroup-1 {

		flex-wrap: wrap;
		gap: 6rpx calc((100% - (3 * 176rpx)) / 3);
		flex-grow: 1;
		width: 100%;

		// .group-img-1:nth-child(3) {
		// 	.img-count {
		// 		display: flex;
		// 		width: 54rpx;
		// 		height: 52rpx;
		// 		// background: #F8F8F8;
		// 		background: rgba(248, 248, 248, 0.3);
		// 		border-radius: 26rpx;
		// 		font-weight: 800;
		// 		font-size: 22rpx;
		// 		color: #333333;
		// 		position: absolute;
		// 		bottom: 10rpx;
		// 		right: 10rpx;
		// 		z-index: 2;
		// 		backdrop-filter: blur(30rpx);
		// 		-webkit-backdrop-filter: blur(30rpx);
		// 	}
		// }
	}

	.group {
		width: 138rpx;
		height: 174rpx;
		border-radius: 40rpx;
	}

	.group1 {
		width: 506rpx;
		height: 288rpx;
		border-radius: 40rpx;
	}

	.group2 {
		width: 506rpx;
		height: 900rpx;
		border-radius: 40rpx;
	}

	.time {
		width: 140rpx;
		height: 58rpx;
		background: #ffffff;
		border-radius: 34rpx;
		border: 2rpx solid #dbf046;
	}

	.white {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		width: 650rpx;
		background: #ffffff;
		border-radius: 40rpx;
		padding: 10rpx 10rpx 20rpx 20rpx;
		box-sizing: border-box;

		.item {
			// min-width: 136rpx;
			padding: 12rpx 20rpx;
			background: #f2f2ff;
			border-radius: 20rpx;
			margin-right: 10rpx;
		}
	}

	.sanC {
		width: 650rpx;
		background: #ffffff;
		border-radius: 40rpx;

		.item {
			padding: 12rpx 20rpx;
			background: #FBFFDF;
			border-radius: 20rpx;
			margin-right: 10rpx;
		}

		.bg {
			background: #ecfff6;
		}
	}

	.btn {
		width: 650rpx;
		height: 74rpx;
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
}

.popuItem {
	// width: 152rpx;
	height: 72rpx;
	background: #f1f1f1;
	border-radius: 20rpx;
}

.active {
	background: #dbf046;
}



.thrumb {
	width: 690rpx;
	height: 108rpx;
	background: #F8F8F8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

}

.project {
	margin: auto;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	width: 690rpx;
	height: 408rpx;
	background: #ffffff;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	border: 2rpx solid #f1f1f1;
	position: relative;

	.absu {
		position: absolute;
		top: 88rpx;
		left: 54rpx;

		.iamg {
			width: 155rpx;
			height: 138rpx;
		}
	}

	.left {
		width: 222rpx;
		height: 274rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.right {
		flex: 1;
		height: 274rpx;

		.top {
			.tip {
				// width: 88rpx;
				height: 36rpx;
				background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}

		.domn {
			.price {
				width: 148rpx;
				height: 92rpx;
				background: linear-gradient(90deg,
						#fff5f3 0%,
						rgba(255, 245, 243, 0) 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.price2 {
				width: 148rpx;
				height: 92rpx;
				background: #fff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}
	}

	.foot {
		width: 100%;
		height: 74rpx;
		background: linear-gradient(92deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
}

.vedio {
	padding-top: 20rpx;

	.vedioItem {
		width: 334rpx;
		height: 614rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		//border: 1rpx solid red;
		margin-bottom: 16rpx;
		position: relative;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.play {
			position: absolute;
			top: 297rpx;
			left: 147rpx;
			z-index: 3;
		}

		.card {
			width: 314rpx;
			height: 82rpx;
			background: #ffffff;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			position: absolute;
			bottom: 10rpx;
			left: 10rpx;
			z-index: 10;

			.huiyuan {
				width: 22rpx;
				height: 20rpx;
				position: absolute;
				bottom: 10rpx;
				left: 44rpx;
				z-index: 12;
			}
		}
	}
}

.video-wrapper {
	width: 100vw;
	height: 100vh;
	background: #000;
	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;
	position: relative;

	.video_box {
		// flex: 1;
		background: red;
	}

	.close_img {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		position: absolute;
		top: 90rpx;
		left: 20rpx;

		.popup-close {
			width: 46rpx;
			height: 46rpx;
		}
	}
}

.mask {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 998;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
}

.offers {
	position: fixed;
	bottom: 0;
	left: 0;
	box-shadow: 0rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	z-index: 999;

	height: 70vh;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	//border: 2rpx solid red;
	// position: relative;
	padding: 40rpx;
	padding-bottom: calc(118rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(118rpx + env(safe-area-inset-bottom));

	.popup-close {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}

	.scroll-Y {
		height: calc(100% - 104rpx + env(safe-area-inset-bottom));
		padding-top: 20rpx;
	}

	.progress {
		box-sizing: border-box;
		width: 670rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
		border-radius: 40rpx;
		padding: 40rpx 20rpx;

		.icon {
			width: 14rpx;
			height: 18rpx;
		}

		.num {
			background: #DBF046;
		}

		.num.act {
			background: #333333;
			color: #DBF046;
		}
	}

	.inp-item {
		background: #F1F1F1;
		border-radius: 20rpx;

		.r {
			width: 480rpx;
		}

		.txt {
			font-size: 24rpx;
			color: #999999;
		}

		.txt.act {
			color: #666666;
		}

		.icon {
			width: 20rpx;
			height: 34rpx;
			flex-shrink: 0;
		}

		.inp {
			text-align: right;
			font-size: 24rpx;
			color: #666666;
			width: 480rpx;
		}
	}

	.price-box {
		background: linear-gradient(180deg, rgba(241, 241, 241, 0) 0%, #F1F1F1 100%);
		border-radius: 20rpx;

		.txt {
			font-weight: 800;
			font-size: 24rpx;
			color: #FF0000;
		}

		.icon {
			width: 20rpx;
			height: 34rpx;
			margin-left: 10rpx;
		}
	}

	.note {
		width: 690rpx;
		//height: 380rpx;
		background: #F1F1F1;
		border-radius: 40rpx;
		word-break: break-word;

		.center {
			width: 650rpx;
			min-height: 178rpx;
			background: #ffffff;
			border-radius: 20rpx;

			.btn {
				width: 260rpx;
				height: 58rpx;
				background: #DBF046;
				border-radius: 34rpx;
			}
		}
	}

	.bottomBtn {
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		background: #F8F8F8;
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

		.btn {
			width: 192rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx;
		}
	}
}

.offers.quan {
	position: relative;

	.hengxian {
		width: 670rpx;
		height: 0rpx;
		border-bottom: 2rpx solid #f1f1f1;
	}

	.list {
		height: calc(70vh - 228rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			// height: 670rpx;
			height: 100%;

			.quanItem {
				.arrow {
					width: 182rpx;
					height: 144rpx;
					background: linear-gradient(90deg, #dbf046 0%, #ffee7e 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					.tip {
						padding: 4rpx;
						width: fit-content;
						background: #333333;
						border-radius: 20rpx 8rpx 8rpx 8rpx;
					}
				}

				.right {
					width: 488rpx;
					height: 144rpx;
					background: #ffffff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					.btn {
						width: 88rpx;
						height: 54rpx;
						background: #dbf046;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}

					.btnA {
						width: 112rpx;
						height: 54rpx;
						background: #333333;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}
				}
			}
		}
	}

	.bottomBtn {
		.btn {
			width: 690rpx;
		}
	}
}
</style>